import React, { Component } from 'react';

import { Row, Col, Button, Icon, Modal, Steps, message } from 'antd';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BannerAnim, { Element } from 'rc-banner-anim';
import TweenOne from 'rc-tween-one';
import IframeComm from "../../components/IframeComm";
import 'rc-banner-anim/assets/index.css';
import styles from "./style.less";
import Link from 'umi/link';
import axios from 'axios';
import Api from '../../services/apis';

const BgElement = Element.BgElement;

const nopic = require('../../assets/nopic.png');
const Step = Steps.Step;
@connect(({ user, project, activities, chart, loading }) => ({
  currentUser: user.currentUser,
  currentUserLoading: loading.effects['user/fetchCurrent']
}))
class HouseDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      doc: 1,
      step: {
        doc: {},
        itemList: []
      },
      stepCount: 0,
      feesData: [
        {
          title: '水费',
          money: '-',
          icon: 'dashboard'
        },
        {
          title: '电费',
          money: '-',
          icon: 'thunderbolt'
        },
        {
          title: '供暖费',
          money: '-',
          icon: 'sliders'
        },
        {
          title: '物业费',
          money: '-',
          icon: 'money-collect'
        },
        {
          title: '燃气费',
          money: '-',
          icon: 'fire'
        },
      ],
      modalVisible: false,
      data: {
        houseName2: '-',
        houseCode: '-',
        buildingArea: '-',
        isRent: '-',//资产状态
        use: '-',
        receivedDate: '-',
        ownershipType: '-',//权属形式
        ownershipStatus: '-',//权属状态
        docPositionId: '-',//档案柜编号
        docPosition: '-',//档案柜位置
        netValue: '-',//净值
        assessmentValue: '-',//评估值
        assessmentDate: '-',//评估时间
        equipmentList: [],//钥匙位置
        packageName: '-',//袋名称
        boxPositionName: '-',//盒位置名称
        housePositionName: '-',//房间位置名称
        cabinetPositionName: '-',//房间位置名称
      }
    };
  }

  componentWillMount() {
    const that = this;
    axios.get(Api.getHouseMessage, {
      params: {
        houseCode: this.props.location.query.houseCode ? this.props.location.query.houseCode : this.props.location.state.houseCode
      }
    }).then((res) => {
      let feesData = this.state.feesData;
      feesData[0].money = res.data.fee.waterFee;
      feesData[1].money = res.data.fee.electricFee;
      feesData[2].money = res.data.fee.heatingFee;
      feesData[3].money = res.data.fee.propertyFee;
      feesData[4].money = res.data.fee.gasFee;

      const images = res.data.imageData.concat(res.data.imageCode);
      res.data.images = images && Array.isArray(images) ? images : [];
      that.setState({
        data: res.data,
        feesData
      });

      axios.get(Api.getHouseOwnership, {
        params: {
          houseCode: res.data.houseCode
        }
      }).then((res) => {
        if (Number(res.data.doc) === 0) {
          that.setState({
            doc: Number(res.data.doc)
          });
        } else {
          that.setState({
            step: res.data,
            stepCount: res.data.itemList.length
          });
        };
      });
    })
  }
  changeList(index) {
    let headerData = this.state.headerData;
    headerData[this.state.choicedIndex].choiced = false;
    headerData[index].choiced = true;
    this.setState({
      headerData,
      choicedIndex: index
    });
  }
  setModalVisible(modalVisible) {
    if (this.state.doc === 0) {
      message.warn('暂无数据！')
    } else {
      this.setState({ modalVisible });
    }
  }
  render() {
    const {
      currentUserLoading,
    } = this.props;
    return (
      <PageHeaderWrapper
        loading={currentUserLoading}
      >
        <div className={styles.cdMain}>
          <div className={styles.cdHeader}>
            {this.state.houseName2}
          </div>
          <Row>
            <div className={`${styles.cdHeaderLeft} pull-left`}>
              <BannerAnim prefixCls='buildingDetailsBannerItem' autoPlay>
              {
                  this.state.data.images && this.state.data.images.map((item, index) =>
                      <Element
                        key={index}
                      >
                        <BgElement
                          key="bg"
                          className={styles.bannerItemPic}
                          style={{
                            backgroundImage: `url(http://192.168.50.55:55555/res_file${item.filePath})`
                          }}
                        />
                      </Element>
                    )
                }
              </BannerAnim>
            </div>
            <div className={`${styles.cdHeaderRight} pull-left`}>
              <h1 className={styles.basicInfo}>
                基本信息
              </h1>
              {
                /* this.state.data.projectCode == 'PJ008' ?
                    
                      ['会议室', '贵宾室', '报告厅', '办公室', '餐厅'].indexOf(this.state.data.houseAction) > -1 ?
                        
                      <Row>
                        <Col span={12}>
                          <span className={styles.label}>划转单位：</span>
                          {this.state.data.transferUnit ? this.state.data.transferUnit : '-'}
                        </Col>
                        <Col span={12}>
                          <span className={styles.label}>详细地址：</span>
                          {this.state.data.ownershipType ? this.state.data.ownershipType : '-'}
                        </Col>
                        <Col span={12}>
                          <span className={styles.label}>建筑名称：</span>
                          {this.state.data.buildingName2 ? this.state.data.buildingName2 : '-'}
                        </Col>
                        <Col span={12}>
                          <span className={styles.label}>楼层：</span>
                          {this.state.data.currentFloor ? this.state.data.currentFloor : '-'}
                        </Col>
                        <Col span={12}>
                          <span className={styles.label}>房号：</span>
                          {this.state.data.houseName ? this.state.data.houseName : '-'}
                        </Col>
                        <Col span={12}>
                          <span className={styles.label}>住房用途：</span>
                          {this.state.data.use ? this.state.data.use : '-'}
                        </Col>
                        <Col span={12}>
                          <span className={styles.label}>使用面积：</span>
                          {this.state.data.useArea ? this.state.data.useArea : '-'}
                        </Col>
                        <Col span={12}>
                          <span className={styles.label}>是否可用：</span>
                          {this.state.data.houseIsable ? this.state.data.houseIsable : '-'}
                        </Col>
                        
                          <Col span={12}>
                            <span className={styles.label}>可容纳人数：</span>
                              {`${this.state.data.housevenuetypehx}(回形) ${this.state.data.housevenuetypekz}(课桌) ${this.state.data.housevenuetypejy}(剧院)`}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>挑高：</span>
                            {this.state.data.housevenuethigh ? this.state.data.housevenuethigh : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>舞台面积：</span>
                            {this.state.data.housevenuedancearea ? this.state.data.housevenuedancearea : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>自然光：</span>
                            {this.state.data.housevenueisnatural ? this.state.data.housevenueisnatural : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>显示器：</span>
                            {this.state.data.housevenueisvideo ? this.state.data.housevenueisvideo : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>LED屏：</span>
                            {this.state.data.housevenueisled ? this.state.data.housevenueisled : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>投影仪：</span>
                            {this.state.data.housevenueisprojector ? this.state.data.housevenueisprojector : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>是否有柱子：</span>
                            {this.state.data.housevenueispillars ? this.state.data.housevenueispillars : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>会场配置：</span>
                            {this.state.data.housevenueconfig ? this.state.data.housevenueconfig : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>备注：</span>
                            {this.state.data.housevenuenote ? this.state.data.housevenuenote : '-'}
                          </Col>
                        </Row>
                        : 
                        <Row>
                          <Col span={12}>
                            <span className={styles.label}>划转单位：</span>
                            {this.state.data.transferUnit ? this.state.data.transferUnit : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>详细地址：</span>
                            {this.state.data.ownershipType ? this.state.data.ownershipType : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>建筑名称：</span>
                            {this.state.data.buildingName2 ? this.state.data.buildingName2 : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>楼层：</span>
                            {this.state.data.currentFloor ? this.state.data.currentFloor : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>房号：</span>
                            {this.state.data.houseName ? this.state.data.houseName : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>住房用途：</span>
                            {this.state.data.use ? this.state.data.use : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>使用面积：</span>
                            {this.state.data.useArea ? this.state.data.useArea : '-'}
                          </Col>
                          <Col span={12}>
                            <span className={styles.label}>是否可用：</span>
                            {this.state.data.houseIsable ? this.state.data.houseIsable : '-'}
                          </Col>
                      </Row>
                  : */
                  <Row>
                    <Col span={12}>
                      <span className={styles.label}>房屋名称：</span>
                      {this.state.data.houseName2}
                    </Col>
                    <Col span={12}>
                      <span className={styles.label}>房屋编号：</span>
                      {this.state.data.houseCode}
                    </Col>
                    <Col span={12}>
                      <span className={styles.label}>建筑面积：</span>
                      {this.state.data.buildingArea}
                    </Col>
                    <Col span={12}>
                      <span className={styles.label}>资产状态：</span>
                      {this.state.data.isRent}
                    </Col>
                    <Col span={12}>
                      <span className={styles.label}>用途：</span>
                      {this.state.data.use}
                    </Col>
                    <Col span={12}>
                      <span className={styles.label}>接管日期：</span>
                      {this.state.data.receivedDate}
                    </Col>
                    <Col span={12}>
                      <span className={styles.label}>权属形式：</span>
                      {this.state.data.ownershipType}
                    </Col>
                    <Col span={12}>
                      <span className={styles.label}>权属状态：</span>
                      {this.state.data.ownershipStatus}
                    </Col>
                  </Row>
              }
            </div>
          </Row>

          {
            /* this.state.data.projectCode !== 'PJ008' ? */
              <div>
                <Row className={styles.w1120}>
                  <div className={`pull-left ${styles.w560}`}>
                    <div className='mainContainer'>
                      <div className="contentHeader">
                        <div className="contentHeaderTitle">
                          <p>账面信息</p>
                          <p>BOOK INFORMATION</p>
                        </div>
                      </div>
                    </div>
                    <div className={styles.br1}>
                      <span>净值：
                    {this.state.data.netValue ? this.state.data.netValue : '- '}元</span>
                      &emsp;&emsp;
                  <span>评估值：
                    {this.state.data.assessmentValue ? this.state.data.assessmentValue : '- '}元</span>
                      &emsp;&emsp;
                  <span>评估时间：
                    {this.state.data.assessmentDate}</span>
                    </div>
                  </div>

                  <div className={`pull-left ${styles.w560}`}>
                    <div className='mainContainer'>
                      <div className='contentHeader'>
                        <div className={`contentHeaderTitle ${styles.small}`}>
                          <p>钥匙信息</p>
                          <p>KEY INFORMATION</p>
                        </div>
                      </div>
                    </div>
                    <div className={styles.br1}>
                      <span>钥匙袋：
                    {this.state.data.packageName}</span>
                      &emsp;&emsp;
                  <span>盒位置：
                    {this.state.data.boxPositionName}</span>
                      &emsp;&emsp;
                  <span>房间位置：
                    {this.state.data.housePositionName}</span>
                      &emsp;&emsp;
                  <span>柜位置：
                    {this.state.data.cabinetPositionName}</span>
                    </div>
                  </div>
                  <div className={`pull-left ${styles.w1120}`}>
                    <div className='mainContainer'>
                      <div className="contentHeader">
                        <div className="contentHeaderTitle">
                          <p>设备信息</p>
                          <p>DEVICE INFORMATION</p>
                        </div>
                      </div>
                    </div>
                    <div className={styles.br1} style={{
                      height: 'auto'
                    }}>
                      {this.state.data.equipmentList.map((item, index) => (
                        <div key={index}>
                          <span>设备名称：{item.equipmentName}</span>
                          &emsp;&emsp;
                          <span>设备型号：{item.equipmentModel}</span>
                                    &emsp;&emsp;
                          <span>设备价值：{item.equipmentValue}元</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </Row>

                <div className='mainContainer'>
                  <div className='contentHeader'>
                    <div className="contentHeaderTitle">
                      <p>欠费情况</p>
                      <p>ARREARS</p>
                    </div>
                  </div>
                </div>
                <div className={styles.fees}>
                  {this.state.feesData.map((item, index) => {
                    return (
                      <div key={index} className={styles.feesItem}>
                        <p>
                          <Icon type={item.icon} theme="filled"></Icon>
                        </p>
                        <p>
                          {item.money}元
                    </p>
                        <p>
                          {item.title}
                        </p>
                      </div>
                    );
                  })}

                </div>
              </div>
              /* : null */
          }
          
        </div>
        <Modal
          title="权属详情"
          centered
          visible={this.state.modalVisible}
          onOk={this.setModalVisible.bind(this, false)}
          onCancel={this.setModalVisible.bind(this, false)}
        >
          <Row className='mrb15'>
            <Col span={12}>证件类型：{this.state.step.doc.docType ? this.state.step.doc.docType : '-'}</Col>
            <Col span={12}>负责人：{this.state.step.itemList[0] ? this.state.step.itemList[0].userCode : '-'}</Col>
          </Row>
          <Steps direction="vertical" current={this.state.stepCount}>
            <Step title="无证" description={this.state.step.itemList[0] ? this.state.step.itemList[0].operateDate : ''} />
            <Step title="办理中" description={this.state.step.itemList[1] ? this.state.step.itemList[1].operateDate : ''} />
            <Step title="办理完成" description={this.state.step.itemList[2] ? this.state.step.itemList[2].operateDate : ''} />
            <Step title="过户中" description={this.state.step.itemList[3] ? this.state.step.itemList[3].operateDate : ''} />
            <Step title="有证" description={this.state.step.itemList[4] ? this.state.step.itemList[4].operateDate : ''} />
          </Steps>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default HouseDetails;
